<style lang="less" scoped>
@import "../../styles/common.less";
@import "./components/table.less";
</style>

<template>
    <div>
        <Row>
            <Card style="min-height: calc(100vh - 128px)">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <div style="display: flex">
                        <Tabs :value="tableMode" style="margin-bottom: 0" type="card" @on-click="switchTab">
                            <TabPane label="全部故障" name="all" icon="navicon"></TabPane>
                            <TabPane label="设备报障" name="device" icon="wifi"></TabPane>
                            <TabPane label="用户报障" name="user" icon="person"></TabPane>
                            <TabPane label="管理人员报障" name="admin" icon="wrench"></TabPane>
                        </Tabs>
                    </div>
                    <div>
                        <Tooltip content="排序和过滤后的数据">
                            <Button type="primary" @click="exportData(2)"><Icon type="funnel"></Icon> </Button>
                        </Tooltip>
                        <Tooltip content="原始数据">
                            <Button type="primary" @click="exportData(1)"><Icon type="ios-download"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <Row v-show="tableMode==='all'">
                    <Col span="24">
                        <Table :columns="historyColumns" :data="historyData" size="small" ref="eventtable"></Table>
                        <Page style="margin-top: 24px; text-align: right" :total="100" show-sizer show-total></Page>
                    </Col>
                </Row>
            </Card>
        </Row>
    </div>
</template>

<script>
import { historyData, historyColumns } from "./data/history.js";
export default {
  name: "event-history",
  data() {
    return {
      historyData,
      historyColumns,
      tableMode: "all",
      csvFileName: ""
    };
  },
  methods: {
    switchTab(name) {
      this.tableMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表"
        });
      } else if (type === 2) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表(排序和过滤后)",
          original: false
        });
      }
    }
  }
};
</script>

<style>

</style>
